/*
	This is the default.css.
	Contents of this file will be moved to other .css file.
*/
html
{
	background-color: #f3f3f3;
}

body 
{ 
	display: none; 
}

.base
{
	text-align: center;
	
	
}

	.contentWrapper
	{
		width: 1000px;
		margin: 10px  auto;
		/*position: relative;*/

		
	}

	.logo
	{
		/*position: absolute;*/
		text-align: left;	
		margin-left: 10px;
		margin-top: 20px;
	}

/*
	Menu css 
*/

	.menu
	{
		position: absolute;
		left: 600px;
		top: 15px;
	}

		.menu ul
		{
			list-style: none;
		}

			.menu ul li
			{
				float: left;
				font-family: Helvetica;
				margin-right: 40px;
				font-size: 13pt;
			}

		.menu a:link
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.menu a:visited
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.meun a:hover
		{
			color: #1b1b1b;
			text-decoration:none;
		}

		#naviBar
		{
			background-color: #fe692f;
			height: 4px;
			top: 50px;
			position: absolute;
			width: 50px;
		}

/*
	Brief introduction
*/
	#briefIntroBarUp
	{
		position: absolute;
		left: 400px;
		top: 75px;
	}

	#briefIntroBarBottom
	{
		position: absolute;
		left: 400px;
		top: 100px;
	}

	#briefIntroText
	{
		-webkit-transition: all 0.2s ease;
		text-align: center;
		margin-top: -31px;
		font-family: Helvetica;
		color: #f3f3f3;
	}
	#briefIntroText:hover
	{
		color: #646464;
	}

/*
	section
*/
	.briefIntroMyself
	{
		position: relative;
		float: left;
		width: 350px;
		margin-top: 30px;
	}

		.sectionTitleBar
		{
			background-color: #fe692f;
			width: 8px;
			height: 26px;
			position: absolute;
			left: 8px;
			top: 8px;
			position: 
		}

		.sectionTitle
		{
			font-family: Helvetica;
			font-size: 20pt;
			position: absolute;
			left: 20px;
			top: 5px;
			margin: 0px;
			color: #1b1b1b;
		}

		.sectionContentBrief
		{
			text-align: left;
			font-family: Helvetica;
			color: #1b1b1b;
			position: absolute;
			top: 20px;
			left: 6px;
			font-size: 14pt;
			line-height: 1;	
		}

		.sectionContent
		{
			position: absolute;
			top: 75px;
			left: 6px;
			text-align: left;
			font-family: helvetica;
			color: #404040;
			font-size: 10pt;
		}

			.sectionContent p
			{
				margin-bottom: 0px;
				margin-top: 3px;
			}

	.contact
	{
		position: relative;
		float: left;
		width: 250px;
		margin-top: 30px;
		margin-left: 50px;
	}
		.contactItems
		{

		}	

		.contactBar
		{
			position: absolute;
			width: 200px;
			height: 1px;
			background-color: #bbbbbb;
			top: 35px;
		}

		.contactItems li
		{
			font-family: helvetica;
			float: left;
			font-size: 14pt;
			color: #404040; 
			height: 32px;
			background-repeat: no-repeat;
			text-indent: 36px;
			list-style: none;
			padding-top: 5px;
			position: absolute;
		}
			.contactItems li a
			{
				-webkit-transition: all 0.5s ease;
			}
			.contactItems li a:link
			{
				color: #646464;
				text-decoration:none;
			}
			.contactItems li a:visited
			{
				color: #646464;
				text-decoration:none;
			}
			.contactItems li a:hover
			{
				color: #fe692f;
				text-decoration: none;
			}


			#facebook
			{
				left: 5px;
				top: 42px;
				background-image: url("../pics/contact_fb.png");
			}

			#google
			{
				left: 5px;
				top: 87px;
				background-image: url("../pics/contact_gg.png");
			}


			#renren
			{
				left: 5px;
				top: 132px;
				background-image: url("../pics/contact_rr.png");
			}

			#qq
			{
				left: 5px;
				top: 177px;
				background-image: url("../pics/contact_qq.png");
			}

	.recentWorks
	{
		position: relative;
		float: left;
		width: 300px;
		margin-top: 30px;
		margin-left: 30px;
	}

	footer
	{

		position: relative;
		left: 0px;
		font-family: helvetica;
		color: #646464;
		font-size: 10pt;
		clear: both;
		margin-bottom: 50px;

	}
		#footerBar
		{
			position: absolute;
			left: 300px;
			top: 25px;
		}

		footer p
		{
			position: absolute;
			left: 400px;
			top: 20px;
		}
		#footerSpace
		{
			height : 30px;
		}

/*
	gameIdea
*/
.pageHeadline
{
	position: relative;	
	
}
	.pageTime
	{
		position: absolute;
		right: 0px;
		top: 6px;
		font-family: helvetica;
		font-size: 10pt;
	}

.pageHeadlineTitle
{
	text-align: left;
	font-family: helvetica;
	color: #1b1b1b;
	font-size: 20pt;
	margin-left: 43px;
	margin-bottom: 10px;
}


.pageContentWrapper
{

    background: url("../pics/bglines.png") rgba(216, 210, 206, 0.2);
    background-position:100% 0%;
    padding-left:35px;
    padding-right:35px;
    margin-left: 30px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    padding-top: 10px;
    padding-bottom: 20px;
}


.pageContent
{
	text-align: left;
	font-family: helvetica;
	color: #1b1b1b;
	font-size: 10pt;
}
	.pageContent p
	{
		margin-bottom: 8px;
		margin-top: 8px;
	}

.occupation
{
	width: 1000px;
	height: 482px;
}

.pageHeadlineBar
{
	position: absolute;
	background-color: #fe692f;
	width: 8px;
	height: 30px;
	left: 30px;
	top: 2px; 

}

.artItemPic img
{
	-webkit-transition: all 0.2s ease;
	-webkit-filter: grayscale(100%);
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
    
}

#fancybox-img
{
	height: 80%;
    width: auto;
    max-width: 600px;	

}

.artItemPic img:hover
{
	-webkit-filter: grayscale(0%);
}

.artList ul
{
	
	clear: both;
}

.artItem
{
	list-style: none;
	width: 165px;
	text-align: left;
	float: left;
	margin-top: 40px;
	margin-left: 50px;
	margin-right: 10px;
}

	.artItem a
	{
		-webkit-transition: all 0.5s ease;
		font-family: helvetica;
		font-size: 10pt;
		color: #fe692f;
		font-weight: bold;

	}
	.artItem a:link
	{
		color: #1b1b1b;
		text-decoration:none;
	}
	.artItem a:visited
	{
		text-decoration:none;
		color: #1b1b1b;
	}
	.artItem a:hover
	{

		text-decoration:none;
		color: #fe692f;
	}

.blogList
{
	clear: left;
	float: left;
	width: 700px;
	padding: 20px 0;
	margin: 0 0 0 30px;
	display: inline;
}
	.blogItemWrapper
	{
		margin-bottom: 50px;
		position: relative;
	}
	.blogItem
	{
		margin-top: 10px;
		background: url("../pics/bglines.png") rgba(216, 210, 206, 0.2);
    	background-position:100% 0%;
    	border: 5px solid rgba(255, 255, 255, 0.3);
    	clear: both;
	}

	.blogTitleBar
	{
		
		background-color: #fe692f;
		width: 8px;
		height: 30px;
	}
	.blogTitle
	{
		position: absolute;
		top: 0px;
		left: 12px;
		text-align: left;
		font-size: 20pt;
		font-family: helvetica;
		color: #1b1b1b;
	}
		.blogTitle a:link
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.blogTitle a:visited
		{
			text-decoration:none;
			color: #1b1b1b;
		}
		.blogTitle a:hover
		{

			text-decoration:none;
			color: #1b1b1b;
		}

	.blogTime
	{
		position: absolute;
		top: 25px;
		right: 5px;
		text-align: right;
		font-size: 8pt;
		font-family: helvetica;
		color: #1b1b1b;
		margin-right: 10px;
		padding-bottom: 5px;
	}

	.blogBody
	{
		text-align: left;
		font-size: 10pt;
		font-family: helvetica;
		color: #1b1b1b;
		padding-right: 20px;
		margin-left: 20px;
	}
	.blogCommentLink
	{
		text-align: right;
		margin-right: 10px;
		margin-top: 5px;
		font-family: helvetica;
	}
		.blogCommentLink a:link
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.blogCommentLink a:visited
		{
			text-decoration:none;
			color: #1b1b1b;
		}
		.blogCommentLink a:hover
		{

			text-decoration:none;
			color: #fe692f;
		}


.blogSide
{
	float: right;
	width: 200px;
	padding: 20px 0;
	margin: 0 20px 0 20px;
	display: inline;
}
	.blogArchive
	{
		font-family: helvetica;
		text-align: left;
		background-position:100% 0%;
    	border: 5px solid rgba(255, 255, 255, 0.3);
    	background-color: #e6e3e1;
    	padding: 5px;
    	padding-left: 10px;

	}

	.blogCategory
	{
		font-family: helvetica;
	}

	.blogArchiveMonth
	{
		margin-left: 30px;
		font-size: 10pt;
		color: #646464;
		clear: both;
	}

	.blogArchiveYear
	{
		clear: both;
		margin-top: 10px;
		margin-left: 0px;
		font-size: 10pt;
		margin-bottom: 5px;
		color: #404040;
	}

	#monthlyArchive
	{
		margin-bottom: 5px;
		font-family: helvetica;
		font-size: 13pt;
		color: #1b1b1b;
		left: 10px;
		margin-left: 10px;
	}
	#monthlyArchiveBar
	{
		float: left;
		width: 6px;
		height: 18px;
		background-color: #fe692f;
	}

	.blogComment
	{
		margin-top: 5px;
		width: 500px;
		padding-bottom: 20px;
		border-bottom: 1px solid #f3f3f3;
	}

	.blogComment:hover
	{
		
		border-bottom: 1px solid #cccccc;
	}

	.blogCommentTime
	{
		clear: both;
		float: left;
		text-align: left;
		font-size: 10pt;
		font-family: helvetica;

	}

	.blogCommentAuthor
	{
		float: right;
		text-align: left;
		font-size: 10pt;
		font-family: helvetica;
	}



	.blogCommentBody
	{
		padding-top: 10px;
		clear: both;
		text-align: left;
		margin-left: 20px;
		font-size: helvetica;
		font-size: 10pt;
		color: #1b1b1b;
		margin-bottom: 30px;
	}




	#cmttitle
	{
		text-align: left;
		font-family: helvetica;
		font-size: 12pt;
		width: 955px; 
		background: #f5f5f5; 
		padding: 3px; 
		padding-bottom: 8px;
        border-bottom: 1px dotted #aaa;
        margin-bottom: 5px;
        color: #646464;
        font-weight: bold;
	}
	#addc
	{
		text-align: left;
		font-family: helvetica;
		font-size: 12pt;
		width: 955px; 
		background: #f5f5f5; 
		padding: 3px; 
		padding-bottom: 8px;
        border-bottom: 1px dotted #aaa;
        margin-bottom: 5px;
        color: #646464;
        font-weight: bold;
        margin-top: 50px;
	}

	#cform
	{
		text-align: left;
		
		font-family: helvetica;
		color: #646464;
		font-size: 10pt;	
		position: relative;

	}
	.commentName
	{
		margin-bottom: 5px;
	}

	.commentContent span
	{
		float: left;
	}
		#cntxt
		{
			position: absolute;
			left: 10px;
			top: 10px;
			font-weight: bold;
		}
		#cncnt
		{
			position: absolute;
			left: 100px;
			top: 10px;
		}
		#cctxt
		{
			position: absolute;
			left: 10px;
			top: 50px;
			font-weight: bold;

		}
		#cccnt
		{
			position: absolute;
			left: 102px;
			top: 50px;

		}

	.commentSpace
	{
		width: 950px;
		height: 250px;

	}

	#submit
	{
		position: absolute;
		left: 628px;
		top: 200px;
	}



/*
	button
*/
.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
.button:hover {
    color: #fe692f;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.button:active {
    color: #000;
    border-color: #444;
}
.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.middle:hover,
.right:hover { border-left: solid 1px #999 }
.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
.big {
    font-size: 16px;
    padding: 10px 15px;
}
.supersize {
    font-size: 20px;
    padding: 15px 20px;
}
.save {
    background: url(sprite.png) 10px 7px no-repeat #f3f3f3;
    padding-left: 30px;
}
.add {
    background: url(sprite.png)  10px -27px no-repeat #f3f3f3;
    padding-left: 30px;
}
.delete {
    background: url(sprite.png)  10px -61px no-repeat #f3f3f3;
    padding-left: 30px;
}
.flag {
    background: url(sprite.png)  10px -96px no-repeat #f3f3f3;
    padding-left: 30px;
}
.up {
    background: url(sprite.png)  13px -133px no-repeat #f3f3f3;
    width: 18px;
}
.down {
    background: url(sprite.png)  13px -168px no-repeat #f3f3f3;
    width: 18px;
}
.save-big {
    background: url(sprite.png) 15px 11px no-repeat #f3f3f3;
    font-size: 16px;
    padding: 10px 15px 10px 35px;
}
.add-big {
    background: url(sprite.png)  15px -23px no-repeat #f3f3f3;
    font-size: 16px;
    padding: 10px 15px 10px 35px;
}
.delete-big {
    background: url(sprite.png)  15px -57px no-repeat #f3f3f3;
    font-size: 16px;
    padding: 10px 15px 10px 35px;
}
.flag-big {
    background: url(sprite.png)  15px -92px no-repeat #f3f3f3;
    font-size: 16px;
    padding: 10px 15px 10px 35px;
}
.up-big {
    background: url(sprite.png)  15px -128px no-repeat #f3f3f3;
    width: 18px;
    font-size: 16px;
    padding: 10px 15px;
}
.down-big {
    background: url(sprite.png)  15px -163px no-repeat #f3f3f3;
    width: 18px;
    font-size: 16px;
    padding: 10px 15px;
}

/*
	textarea
*/
textarea {
	width: 600px;
	height: 120px;
	border: 1px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}


#id_author {
	border: 1px solid #cccccc;
	padding: 5px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

/* project list
*/
.projectList * {margin: 0; padding: 0;}
 
.projectList div {
  margin: 20px;
}
 
.projectList ul {
  list-style-type: none;
  
}
 
.projectList h3 {
	text-align: left;
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
.projectList li img {
  float: left;

  margin: 0 15px 0 0;
  

}

.projectList li img:hover` {
	
}

 
.projectList li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
  text-align: left;
}
 
.projectList li {
	margin-left: 10px;
	float: left;
	width: 450px;
  padding: 10px;
  overflow: auto;
}
 
.projectList li:hover {
  background: #eee;
  }

.projectList a h3
{
	-webkit-transition: all 0.5s ease;
}
.projectList a:link
{
	color: #1b1b1b;
	text-decoration:none;
}
.projectList a:visited
{
	text-decoration:none;
	color: #1b1b1b;
}
.projectList a:hover
{

	text-decoration:none;
	
}

.projectList a h3:hover
{
	color: #fe692f;
}